<template>
    <el-dialog title="销售发票(红冲)登记 - 编辑" :visible.sync="dialogVisible">
      <el-form ref="invoiceForm" :model="invoiceForm" label-width="80px">
        <el-form-item label="单据编号" prop="billNo">
          <el-input v-model="invoiceForm.billNo" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="单据日期" prop="billDate">
          <el-date-picker type="date" v-model="invoiceForm.billDate" placeholder="请选择"></el-date-picker>
        </el-form-item>
        <el-form-item label="生效时间" prop="effectiveTime">
          <el-date-picker type="date" v-model="invoiceForm.effectiveTime" placeholder="请选择"></el-date-picker>
        </el-form-item>
        <el-form-item label="制单时间" prop="createTime">
          <el-date-picker type="datetime" v-model="invoiceForm.createTime" placeholder="请选择"></el-date-picker>
        </el-form-item>
        <el-form-item label="制单部门" prop="sysOrgCode">
          <el-input v-model="invoiceForm.sysOrgCode" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="制单人" prop="createBy">
          <el-select v-model="invoiceForm.createBy" placeholder="请选择">
            <el-option label="admin" value="admin"></el-option>
            <!-- 其他制单人选项 -->
          </el-select>
        </el-form-item>
        <el-form-item label="修改时间" prop="updateTime">
          <el-date-picker type="datetime" v-model="invoiceForm.updateTime" placeholder="请选择"></el-date-picker>
        </el-form-item>
        <el-form-item label="修改人" prop="updateBy">
          <el-input v-model="invoiceForm.updateBy" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="源单类型" prop="srcType">
          <el-select v-model="invoiceForm.srcType" placeholder="请选择">
            <el-option label="销售发票登记" value="销售发票登记"></el-option>
            <!-- 其他源单类型选项 -->
          </el-select>
        </el-form-item>
        <el-form-item label="单据主题" prop="subject">
          <el-input v-model="invoiceForm.subject" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="客户" prop="customer">
          <el-select v-model="invoiceForm.customer" placeholder="请选择">
            <el-option label="客户一" value="customer1"></el-option>
            <el-option label="客户二" value="customer2"></el-option>
            <!-- 其他客户选项 -->
          </el-select>
        </el-form-item>
        <el-form-item label="发票类型" prop="invoiceType">
          <el-select v-model="invoiceForm.invoiceType" placeholder="请选择发票类型">
            <el-option label="普通发票" value="普通发票"></el-option>
            <!-- 其他发票类型选项 -->
          </el-select>
        </el-form-item>
        <el-form-item label="开票日期" prop="zip">
          <el-date-picker type="date" v-model="invoiceForm.zip" placeholder="请选择"></el-date-picker>
        </el-form-item>
        <el-form-item label="蓝字单据" prop="blueBill">
          <el-input v-model="invoiceForm.blueBill" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="蓝字发票号" prop="blueInvoiceNo">
          <el-input v-model="invoiceForm.blueInvoiceNo" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="发票号" prop="invoiceNo">
          <el-input v-model="invoiceForm.invoiceNo" placeholder="请输入"></el-input>
        </el-form-item>
        <!-- 明细表格 -->
        <el-table :data="invoiceForm.details" border style="width: 100%">
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column prop="sourceNumber" label="源分录号"></el-table-column>
          <el-table-column prop="material" label="物料"></el-table-column>
          <el-table-column prop="specification" label="规格型号"></el-table-column>
          <el-table-column prop="taxRate" label="税率%" width="80"></el-table-column>
          <el-table-column prop="unit" label="单位"></el-table-column>
          <el-table-column prop="quantity" label="开票数量"></el-table-column>
          <el-table-column prop="amount" label="开票金额"></el-table-column>
          <el-table-column prop="remark" label="备注"></el-table-column>
        </el-table>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="invoiceForm.remark" type="textarea"></el-input>
        </el-form-item>
        <el-form-item label="附件">
          <el-upload
            class="upload-demo"
            action="#"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            
            list-type="text"
          >
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="saveInvoice">保存</el-button>
        <el-button type="primary" @click="submitInvoice">提交</el-button>
      </div>
    </el-dialog>
  </template>
  
  <script>
  export default {
    data() {
      return {
        dialogVisible: false,
        invoiceForm: {
          billNo: '',
          billDate: '',
          effectiveTime: '',
          createTime: '',
          sysOrgCode: '',
          createBy: '',
          updateTime: '',
          updateBy: '',
          srcType: '',
          subject: '',
          customer: '',
          invoiceType: '',
          zip: '',
          blueBill: '',
          blueInvoiceNo: '',
          invoiceNo: '',
          details: [],
          remark: '',
          // fileList: []
        }
      };
    },
    methods: {
      handlePreview(file) {
        console.log(file);
      },
      handleRemove(file, ) {
        console.log(file,);
      },
      saveInvoice() {
        // 在这里进行保存发票的逻辑，例如发送请求到后端保存数据
        console.log('保存发票:', this.invoiceForm);
        this.dialogVisible = false;
        // 保存后可以调用查询方法刷新列表（如果需要）
        this.$emit('query');
      },
      submitInvoice() {
        // 提交发票的逻辑，与保存类似，可以根据实际需求区分
        console.log('提交发票:', this.invoiceForm);
        this.dialogVisible = false;
        this.$emit('query');
      }
    }
  };
  </script>
  
  <style scoped>
  .upload-demo {
    margin-bottom: 10px;
  }
  </style>